Full source code website bán hàng thương mại điện tử gần giống shopee
469.122 lượt xem;
1 /*
2 * DC Vertical Mega Menu - jQuery vertical mega menu
3 * Copyright (c) 2011 Design Chemical
4 *
5 * Dual licensed under the MIT and GPL licenses:
6 * http://www.opensource.org/licenses/mit-license.php
7 * http://www.gnu.org/licenses/gpl.html
8 *
9 */
10 (function($){
11
12 //define the new for the plugin ans how to call it
13 $.fn.dcVerticalMegaMenu = function(options){
14 //set default options
15 var defaults = {
16 classParent: 'dc-mega',
17 arrow: true,
18 classArrow: 'dc-mega-icon',
19 classContainer: 'sub-container',
20 classSubMenu: 'sub',
21 classMega: 'mega',
22 classSubParent: 'mega-hdr',
23 classSubLink: 'mega-hdr',
24 classRow: 'row',
25 rowItems: 3,
26 speed: 'fast',
27 effect: 'show',
28 direction: 'right'
29 };
30
31 //call in the default otions
32 var options = $.extend(defaults, options);
33 var $dcVerticalMegaMenuObj = this;
34
35 //act upon the element that is passed into the design
36 return $dcVerticalMegaMenuObj.each(function(options){
37
38 $mega = $(this);
39 if(defaults.direction == 'left'){
40 $mega.addClass('left');
41 } else {
42 $mega.addClass('right');
43 }
44 // Get Menu Width
45 var megaWidth = $mega.width();
46
47 // Set up menu
48 $('> li',$mega).each(function(){
49
50 var $parent = $(this);
51 var $megaSub = $('> ul',$parent);
52
53 if($megaSub.length > 0){
54
55 $('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
56 $megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
57 var $container = $('.'+defaults.classContainer,$parent);
58
59 if($('ul',$megaSub).length > 0){
60
61 $parent.addClass(defaults.classParent+'-li');
62 $container.addClass(defaults.classMega);
63
64 // Set sub headers
65 $('> li',$megaSub).each(function(){
66 $(this).addClass('mega-unit');
67 if($('> ul',this).length){
68 $(this).addClass(defaults.classSubParent);
69 $('> a',this).addClass(defaults.classSubParent+'-a');
70 } else {
71 $(this).addClass(defaults.classSubLink);
72 $('> a',this).addClass(defaults.classSubLink+'-a');
73 }
74 });
75
76 // Create Rows
77 var hdrs = $('.mega-unit',$parent);
78 rowSize = parseInt(defaults.rowItems);
79 for(var i = 0; i < hdrs.length; i+=rowSize){
80 hdrs.slice(i, i+rowSize).wrapAll('<div class="'+defaults.classRow+'" />');
81 }
82
83 // Get mega dimensions
84 var itemWidth = $('.mega-unit',$megaSub).outerWidth(true);
85 var rowItems = $('.row:eq(0) .mega-unit',$megaSub).length;
86 var innerItemWidth = itemWidth * rowItems;
87 var totalItemWidth = innerItemWidth + containerPad;
88
89 // Set mega header height
90 $('.row',this).each(function(){
91 $('.mega-unit:last',this).addClass('last');
92 var maxValue = undefined;
93 $('.mega-unit > a',this).each(function(){
94 var val = parseInt($(this).height());
95 if (maxValue === undefined || maxValue < val){
96 maxValue = val;
97 }
98 });
99 $('.mega-unit > a',this).css('height',maxValue+'px');
100 $(this).css('width',innerItemWidth+'px');
101 });
102 var subWidth = $megaSub.outerWidth(true);
103 var totalWidth = $container.outerWidth(true);
104 var containerPad = totalWidth - subWidth;
105 // Calculate Row Height
106 $('.row',$megaSub).each(function(){
107 var rowHeight = $(this).height();
108 $(this).parent('.row').css('height',rowHeight+'px');
109 });
110 $('.row:last',$megaSub).addClass('last');
111 $('.row:first',$megaSub).addClass('first');
112 } else {
113 $container.addClass('non-'+defaults.classMega);
114 }
115 }
116
117 var $container = $('.'+defaults.classContainer,$parent);
118 var subWidth = $megaSub.outerWidth(true);
119 // Get flyout height
120 var subHeight = $container.height();
121 var itemHeight = $parent.outerHeight(true);
122 // Set position to top of parent
123 $container.css({
124 height: subHeight+'px',
125 marginTop: -itemHeight+'px',
126 zIndex: '1000',
127 width: subWidth+'px'
128 }).hide();
129 });
130
131 // HoverIntent Configuration
132 var config = {
133 sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
134 interval: 100, // number = milliseconds for onMouseOver polling interval
135 over: megaOver, // function = onMouseOver callback (REQUIRED)
136 timeout: 0, // number = milliseconds delay before onMouseOut
137 out: megaOut // function = onMouseOut callback (REQUIRED)
138 };
139
140 $('li',$dcVerticalMegaMenuObj).hoverIntent(config);
141
142 function megaOver(){
143 $(this).addClass('mega-hover');
144 var $link = $('> a',this);
145 var $subNav = $('.sub',this);
146 var $container = $('.sub-container',this);
147 var width = $container.width();
148 var outerHeight = $container.outerHeight();
149 var height = $container.height();
150 var itemHeight = $(this).outerHeight(true);
151 var offset = $link.offset();
152 var scrollTop = $(window).scrollTop();
153 var offset = offset.top - scrollTop
154 var bodyHeight = $(window).height();
155 var maxHeight = bodyHeight - offset;
156 var xsHeight = maxHeight - outerHeight;
157
158 if(xsHeight < 0){
159 var containerMargin = xsHeight - itemHeight;
160 $container.css({marginTop: containerMargin+'px'});
161 }
162
163 var containerPosition = {right: megaWidth};
164 if(defaults.direction == 'right'){
165 containerPosition = {left: megaWidth};
166 }
167
168 if(defaults.effect == 'fade'){
169 $container.css(containerPosition).fadeIn(defaults.speed);
170 }
171 if(defaults.effect == 'show'){
172 $container.css(containerPosition).show();
173 }
174 if(defaults.effect == 'slide'){
175 $container.css({
176 width: 0,
177 height: 0,
178 opacity: 0});
179
180 if(defaults.direction == 'right'){
181
182 $container.show().css({
183 left: megaWidth
184 });
185 } else {
186
187 $container.show().css({
188 right: megaWidth
189 });
190 }
191 $container.animate({
192 width: width,
193 height: height,
194 opacity: 1
195 }, defaults.speed);
196 }
197 }
198
199 function megaOut(){
200 $(this).removeClass('mega-hover');
201 var $container = $('.sub-container',this);
202 $container.hide();
203 }
204 });
205 };
206 })(jQuery);
2 * DC Vertical Mega Menu - jQuery vertical mega menu
3 * Copyright (c) 2011 Design Chemical
4 *
5 * Dual licensed under the MIT and GPL licenses:
6 * http://www.opensource.org/licenses/mit-license.php
7 * http://www.gnu.org/licenses/gpl.html
8 *
9 */
10 (function($){
11
12 //define the new for the plugin ans how to call it
13 $.fn.dcVerticalMegaMenu = function(options){
14 //set default options
15 var defaults = {
16 classParent: 'dc-mega',
17 arrow: true,
18 classArrow: 'dc-mega-icon',
19 classContainer: 'sub-container',
20 classSubMenu: 'sub',
21 classMega: 'mega',
22 classSubParent: 'mega-hdr',
23 classSubLink: 'mega-hdr',
24 classRow: 'row',
25 rowItems: 3,
26 speed: 'fast',
27 effect: 'show',
28 direction: 'right'
29 };
30
31 //call in the default otions
32 var options = $.extend(defaults, options);
33 var $dcVerticalMegaMenuObj = this;
34
35 //act upon the element that is passed into the design
36 return $dcVerticalMegaMenuObj.each(function(options){
37
38 $mega = $(this);
39 if(defaults.direction == 'left'){
40 $mega.addClass('left');
41 } else {
42 $mega.addClass('right');
43 }
44 // Get Menu Width
45 var megaWidth = $mega.width();
46
47 // Set up menu
48 $('> li',$mega).each(function(){
49
50 var $parent = $(this);
51 var $megaSub = $('> ul',$parent);
52
53 if($megaSub.length > 0){
54
55 $('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
56 $megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
57 var $container = $('.'+defaults.classContainer,$parent);
58
59 if($('ul',$megaSub).length > 0){
60
61 $parent.addClass(defaults.classParent+'-li');
62 $container.addClass(defaults.classMega);
63
64 // Set sub headers
65 $('> li',$megaSub).each(function(){
66 $(this).addClass('mega-unit');
67 if($('> ul',this).length){
68 $(this).addClass(defaults.classSubParent);
69 $('> a',this).addClass(defaults.classSubParent+'-a');
70 } else {
71 $(this).addClass(defaults.classSubLink);
72 $('> a',this).addClass(defaults.classSubLink+'-a');
73 }
74 });
75
76 // Create Rows
77 var hdrs = $('.mega-unit',$parent);
78 rowSize = parseInt(defaults.rowItems);
79 for(var i = 0; i < hdrs.length; i+=rowSize){
80 hdrs.slice(i, i+rowSize).wrapAll('<div class="'+defaults.classRow+'" />');
81 }
82
83 // Get mega dimensions
84 var itemWidth = $('.mega-unit',$megaSub).outerWidth(true);
85 var rowItems = $('.row:eq(0) .mega-unit',$megaSub).length;
86 var innerItemWidth = itemWidth * rowItems;
87 var totalItemWidth = innerItemWidth + containerPad;
88
89 // Set mega header height
90 $('.row',this).each(function(){
91 $('.mega-unit:last',this).addClass('last');
92 var maxValue = undefined;
93 $('.mega-unit > a',this).each(function(){
94 var val = parseInt($(this).height());
95 if (maxValue === undefined || maxValue < val){
96 maxValue = val;
97 }
98 });
99 $('.mega-unit > a',this).css('height',maxValue+'px');
100 $(this).css('width',innerItemWidth+'px');
101 });
102 var subWidth = $megaSub.outerWidth(true);
103 var totalWidth = $container.outerWidth(true);
104 var containerPad = totalWidth - subWidth;
105 // Calculate Row Height
106 $('.row',$megaSub).each(function(){
107 var rowHeight = $(this).height();
108 $(this).parent('.row').css('height',rowHeight+'px');
109 });
110 $('.row:last',$megaSub).addClass('last');
111 $('.row:first',$megaSub).addClass('first');
112 } else {
113 $container.addClass('non-'+defaults.classMega);
114 }
115 }
116
117 var $container = $('.'+defaults.classContainer,$parent);
118 var subWidth = $megaSub.outerWidth(true);
119 // Get flyout height
120 var subHeight = $container.height();
121 var itemHeight = $parent.outerHeight(true);
122 // Set position to top of parent
123 $container.css({
124 height: subHeight+'px',
125 marginTop: -itemHeight+'px',
126 zIndex: '1000',
127 width: subWidth+'px'
128 }).hide();
129 });
130
131 // HoverIntent Configuration
132 var config = {
133 sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
134 interval: 100, // number = milliseconds for onMouseOver polling interval
135 over: megaOver, // function = onMouseOver callback (REQUIRED)
136 timeout: 0, // number = milliseconds delay before onMouseOut
137 out: megaOut // function = onMouseOut callback (REQUIRED)
138 };
139
140 $('li',$dcVerticalMegaMenuObj).hoverIntent(config);
141
142 function megaOver(){
143 $(this).addClass('mega-hover');
144 var $link = $('> a',this);
145 var $subNav = $('.sub',this);
146 var $container = $('.sub-container',this);
147 var width = $container.width();
148 var outerHeight = $container.outerHeight();
149 var height = $container.height();
150 var itemHeight = $(this).outerHeight(true);
151 var offset = $link.offset();
152 var scrollTop = $(window).scrollTop();
153 var offset = offset.top - scrollTop
154 var bodyHeight = $(window).height();
155 var maxHeight = bodyHeight - offset;
156 var xsHeight = maxHeight - outerHeight;
157
158 if(xsHeight < 0){
159 var containerMargin = xsHeight - itemHeight;
160 $container.css({marginTop: containerMargin+'px'});
161 }
162
163 var containerPosition = {right: megaWidth};
164 if(defaults.direction == 'right'){
165 containerPosition = {left: megaWidth};
166 }
167
168 if(defaults.effect == 'fade'){
169 $container.css(containerPosition).fadeIn(defaults.speed);
170 }
171 if(defaults.effect == 'show'){
172 $container.css(containerPosition).show();
173 }
174 if(defaults.effect == 'slide'){
175 $container.css({
176 width: 0,
177 height: 0,
178 opacity: 0});
179
180 if(defaults.direction == 'right'){
181
182 $container.show().css({
183 left: megaWidth
184 });
185 } else {
186
187 $container.show().css({
188 right: megaWidth
189 });
190 }
191 $container.animate({
192 width: width,
193 height: height,
194 opacity: 1
195 }, defaults.speed);
196 }
197 }
198
199 function megaOut(){
200 $(this).removeClass('mega-hover');
201 var $container = $('.sub-container',this);
202 $container.hide();
203 }
204 });
205 };
206 })(jQuery);
